import React, { useState } from 'react'
import Head from 'next/head'
import Link from 'next/link'
import Header from '../components/Header'
import Author from '../components/Author'
import Advert from "../components/Advert";
import Footer from "../components/Footer";
import { Col, Row, List } from 'antd'
import {
  CalendarOutlined,
  FolderOutlined,
  FireTwoTone,
  FileOutlined
} from '@ant-design/icons'
import axios from 'axios'
import serevicePath from '../config/apiUrl';
import { marked } from 'marked'
import highlight from 'highlight.js'


const Home = (props) => {
  const { data } = props
  const [mylist, setMylist] = useState(data)
  const renderer = new marked.Renderer()
  // 解析
  marked.setOptions({
    renderer: renderer,
    gfm: true,
    // 增添容错率 保证markdown完全正确
    pedantic: false,
    // 不忽略html标签
    sanitize: false,
    tables: true,
    breaks: false,
    // 自动渲染页面
    smartLists: true,
    highlight: function (code) {
      return highlight.highlightAuto(code).value
    }
  })
  return (
    <div>
      <Head>
        <title>Home</title>
      </Head>
      <Header />
      <Row className="comm-main" type="flex" justify='center'>
        {/* 每一个属性都表示适配功能 可以把页面分成平均24列 然后进行布局 */}
        {/* xs sm md lg xl 需要后面看一下
        ... */}
        <Col className='comm-left' xs={24} sm={24} md={16} lg={18} xl={14}>
          <List
            header={<div>最新日志</div>}
            // 列表中的每一项中的每个元素该如何分布
            // itemLayout="horizontal"
            itemLayout="vertical"
            // 列表中每一项的元素数据
            dataSource={mylist}
            renderItem={item => {
              return (
                <List.Item>
                  <div className='list-title'>
                    <Link href={{ pathname: '/detailed', query: { id: item.id } }}>
                      <a>{item.title}</a>
                    </Link>
                  </div>
                  <div className='list-icon'>
                    <span>
                      <CalendarOutlined />
                      {item.addTime}
                    </span>
                    <span>
                      <FolderOutlined />
                      {item.typeName}
                    </span>
                    <span className='list-span_fire'>
                      <FireTwoTone twoToneColor="#f0732e" />
                      {item.view_count}&nbsp;&nbsp;&nbsp;人
                    </span>
                  </div>
                  <div className='list-context'
                    dangerouslySetInnerHTML={{ __html: marked(item.introduce) }}
                  ></div>
                  {/* <FileOutlined /> */}
                </List.Item>
              )
            }}
          />
        </Col>
        <Col className='comm-right' xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author />
          <Advert />
        </Col>
      </Row>
      <Footer />
    </div>
  )
}

// 从后台拿数据
Home.getInitialProps = async () => {
  const promise = new Promise((resolve) => {
    // 默认get方法
    axios(serevicePath.getArticleList)
      .then(
        (res) => {
          resolve(res.data)
        }
      )
  })
  return await promise
}

export default Home